<template>
	<div class="swiper">
    <swiper :options="swiperOption" v-if="showSwiper" >
      <swiper-slide 
      	v-for="(item, index) in list" 
      	:key="item.id">
      		<img :src="item.imgUrl" class="swiper-img">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
	name: 'HomeSwiper',
  props: {
    list: Array
  },
	data(){
    return {
      // swiperList: [
      // 	{
      // 		id: '001',
      //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1807/66/e5a5cec881702f02.jpg_750x200_67bb5691.jpg'
      // 	},
      // 	{
      // 		id: '002',
      //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1807/e0/b59ec01d6992e202.jpg_750x200_db9cc3d8.jpg'
      // 	},
      // 	{
      // 		id: '003',
      // 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
      // 	},
      // 	{
      // 		id: '004',
      // 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1610/f3/f39d9de1e92deb02.jpg_750x200_8cbc3f9b.jpg'
      // 	},
      // ],
      //轮播config
      swiperOption: {
      	pagination: '.swiper-pagination',
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,  
        autoplay: 2000,
        //autoplay: 3000,        
        slidesPerView: "auto",//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        centeredSlides: true//<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">设定为true时，活动块会居中，而不是默认状态下的居左。</span>
      }
    }
  },
  computed: {
    showSwiper (){
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
	.swiper >>> .swiper-pagination-bullet-active
		background: #fff
	.swiper
		width: 100%
		height: 0
		overflow: hidden
		padding-bottom: 29.8%
		.swiper-img
			width: 100%
			height: 100%
</style>